
<template>
    <div>
        <div style="margin-bottom: 20px;"><strong>管理员管理 / </strong>用户管理</div>
        <div>
            <el-row>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRole">添加用户</el-button>
                <el-button type="danger" icon="el-icon-delete-solid" size="mini" @click="deleteAdmin">删除用户</el-button>
            </el-row>
        </div>
        <div class="tableBox" style="margin-top:3%">
            <el-row>
                <!-- 主体表格部分 -->
                <template>
                    <el-table
                    :data="roleTable"
                    border
                    fit
                    style="width: 100%">
                     <el-table-column align="center"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="name"
                        label="序号" 
                        type="index"
                        width="120">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="admin_name"
                        label="用户编码">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="role_supper_admin"
                        label="所属角色">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="region_name"
                        label="所属区域">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="admin_remark_column"
                        label="描述">
                    </el-table-column>
                    
                    <el-table-column align="center"
                        prop="admin_state"
                        label="状态">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.admin_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.admin_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"
                        prop="address"
                        label="操作"
                        width='300'>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handle(scope.$index, scope.row,0)">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                v-if="scope.row.role_id!==1"
                                @click="handle(scope.$index, scope.row,1)">删除
                            </el-button>
                             
                            <el-button size="mini" v-if="scope.row.role_id!==1" @click="stateClick(scope.row)">
                                {{scope.row.admin_state===0?'停用':'启用'}}
                            </el-button>
                            
                        </template>
                    </el-table-column>
                    </el-table>
                </template>
            </el-row>
            <!-- 修改框 -->
            <div style="display: flex; margin-top: 20px; height: 100px;">
                <transition name="el-zoom-in-center">
                    <div v-show="show2" class="transition-box">
                            <el-form :model="roleForm" :rules="rules"  label-width="100px" class="demo-ruleForm">
                                <div class="nameBox">
                                    <el-form-item label="用户名称" prop="name">
                                        <el-input v-model="roleForm.role_supper_admin" style="width:200px"></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item label="用户描述" prop="address">
                                    <el-input v-model="roleForm.role_describe" type="textarea"></el-input>
                                </el-form-item>
            
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('roleForm')">修改</el-button>
                                    <el-button @click="resetForm('roleForm')">取消</el-button>
                                </el-form-item>
                            </el-form>
                    </div>
                </transition>
            </div>
            <!-- 添加用户模态框 -->
            <div>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="60%">
                    <el-form :model="addRoleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                        <el-form-item label="用户账号" prop="name">
                            <el-input v-model="addRoleForm.admin_name"></el-input>
                        </el-form-item>
                        <el-form-item label="用户密码" prop="name">
                            <el-input type="password" v-model="addRoleForm.admin_pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="分配角色" prop="name">
                            <template>
                                <el-select v-model="addRoleForm.role_id" clearable placeholder="请选择" @change="findByRoleId">
                                    <el-option
                                    v-for="item in roles"
                                    :key="item.role_id"
                                    :label="item.role_supper_admin"
                                    :value="item.role_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="所属县区" >
                            <template>
                                <el-select v-model="addRoleForm.area_code" @change="reginById" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in regin"
                                    :key="item.cid"
                                    :label="item.region_name"
                                    :value="item.region_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="所属街道">
                            <template>
                                <el-select v-model="addRoleForm.area_name"  :disabled="isOpen"    clearable @change="streets">
                                    <el-option
                                    v-for="item in street"
                                    :key="item.cid"
                                    :label="item.region_name"
                                    :value="item.region_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="addRoleForm.admin_remark_column"/>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible">取 消</el-button>
                        <el-button type="primary" @click="insertAdmin">确 定</el-button>
                    </span>
                </el-dialog>

            </div>
            
        </div>
        <!-- 删除提示框 -->
        <div>
          <el-dialog
            title="提示"
            :visible.sync="deleteDialog"
            width="30%"
           >
            <span>是否删除</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteY(scope.row)">确 定</el-button>
            </span>
          </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    
     data() {
        return {
          roleTable:[],
          show2: false ,
          isOpen:false,
          isState:true,
          roleForm:{
                role_supper_admin:'',
                role_describe:'',
                
          },
          addRoleForm:{
              admin_name:'',
              admin_pwd:'',
              area_code:'',
              area_name:''

          },
          rules: {
                role_supper_admin: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                role_describe: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ],
                roleName:[
                    {redirect: true,message:"请输入用户名",trigger: 'blur'}
                ]

            },
        deleteDialog:false,
        roles: [],
        regin: [],
        street:[],
        value: '',
        reginSelect:'',
        roleSelectt:'',
        streetSelect:'',
        dialogVisible:false,
        countiesId:'',
        streetId:'',
        roleId:'',
        admin_name:'',
        admin_pwd:'',
        currentPage4:'',
        currentPage:'',
        }
        
      },
    methods: {
        findAmindAll(){
            axios.get("/api/city_admin/findAllUser")
                .then((r)=>{
                    this.roleTable=r.data.data;
                })
        },
      indexMethod(index) {
        return index * 1;
      },
      handle(index, row,index1){
          
          if(index1===0){
              console.log("编辑");
          }else if(index1===1){

             axios.get("/api/city_admin/"+row.admin_id)
              .then(r=>{
                  console.log(r);
                  if(r.data.code===200){
                      this.$message({
                        message: '删除成功',
                        type: 'success'
                        });
                    this.findAmindAll();
                  }
              })
          }else if(index1===2){
              console.log("添加权限");
          }
          console.log(index,row);
      },
      deleteY(){
          alert(1)
       
      },
      resetForm(){
          this.show2=false;
      },
      addRole(){
        this.dialogVisible=true;
      },
    //  角色下拉框触发时间
    findByRoleId(index){
        
        if(index===1||index===2){
            this.isOpen=true;
        }else{
            this.isOpen=false;
        }
    },
    //  区县触发事件
      reginById(reginId){
        axios.get("/api/RegionController/"+reginId)
        .then((r)=>{
           if(this.isOpen===false){
           this.addRoleForm.area_name=r.data.data[0].region_name;
           }
           this.street=r.data.data;
        })
        this.countiesId=reginId;
    },
    // 街道触发事件
    streets(streetId){
        this.streetId=streetId;

    },
 
    //确定按钮触发事件
    insertAdmin(){
        console.log(this.addRoleForm);
        axios.post("/api/city_admin/insertAdmin",this.addRoleForm)
        .then(r=>{
            console.log(r);
            if(r.data.code===200){
                this.dialogVisible=false;
                 this.$message({
                message: '添加成功',
                type: 'success'
                });
                this.findAmindAll();
                this.addRoleForm={};
            }
        });
    },
    // 停用启用状态
    stateClick(scope){
        console.log(scope);
        axios.post("/api/city_admin/updateState",scope)
        .then(r=>{
            
            if(r.data.code===200){
                this.$message({
                message: '修改成功',
                type: 'success'
                });
                this.findAmindAll();
            }
        })
    },
    deleteAdmin(){},
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    
      
    },
    mounted() {
        // 获取用户列表
        
        axios.get("/api/city_admin/findAllUser")
        .then((r)=>{
            console.log("用户信息",r.data);
            this.roleTable=r.data.data;
        })
        
        // 获取地区
        axios.get("/api/RegionController/findCounty")
        .then((r)=>{
            this.regin=r.data.data;
        });
        // 获取所有角色
        axios.get("/api/Role/findListRole")
        .then((r)=>{
            
            this.roles=r.data.data;
        });

      
        
    },
}
</script>

<style  scoped>
    .transition-box {
        margin-bottom: 10px;
        width: 84%;
        height: 100%;
        border-radius: 4px;
        background-color:white;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
        position:absolute;
        top: 20%;
        z-index: 100;
        
    }
    .nameBox{
        width: 20%;
    }
</style>